<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #mask{
            width: 600px;
            background: rgba(0,0,0,0.05);
            /*padding: 3rem 0 1rem 0;*/
            /*display: none;*/
            margin: 0 auto;
            /*margin-top: 51%;*/
        }

        #mask p{
            text-align: center;
            font-size: 20px;
            color: rgba(0,0,0,0.5);
        }

        img{
            display: block;
            width:40%;
            margin: 0 auto;
        }

        .start{
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }

        #start{
            background-color: aqua;
            width: 100px;
            height: 30px;
        }

        #yuyin{
            width: 600px;
            margin: 30px auto;
            text-align: center;
        }

        #audio-container {
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }

        audio {
            display: block;
            margin: 0 auto 10px;
        }

        .result{
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }

        textarea{
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<script th:src="@{/js/axios.js}"></script>
<body>

<div id="mask">
    <img th:src="@{/img/a.jpg}" alt="">
    <p id="tip">点击按钮开始录音</p>
</div>
<div class="start">
    <button id="start" class="ui-btn ui-btn-primary">开始</button>
</div>

<div id="yuyin">
    语音内容：<div id="audio-container"></div>
</div>


<div class="result">
    识别结果：<textarea id="result"></textarea>
</div>



<!--<script th:src="@{/js/recorder.js}"></script>-->
<script th:src="@{/js/recorder1.js}"></script>


<script>
    var container = document.querySelector('#audio-container');

    let recorder = new Recorder({
        sampleBits: 16,         // 采样位数，支持 8 或 16，默认是16
        sampleRate: 48000,      // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
        numChannels: 1,         // 声道，支持 1 或 2， 默认是1
    });

    var mask = document.getElementById('mask');
    var start = document.querySelector('#start');
    var tip = document.getElementById('tip');
    var flag = true;


    start.addEventListener('click',function(){
        console.log(flag);
        if(flag){
            recorder.start().then(function() {
                // 开始录音
                tip.innerText="正在录音";
                timer = setTimeout(function(){
                    var audio = document.querySelectorAll('audio');
                    for(var i = 0; i < audio.length; i++){
                        if(!audio[i].paused){
                            audio[i].pause();
                        }
                    }
                },500);
                start.innerHTML="再次点击结束";
            });

        }else{
            // 结束录音
            recorder.stop();
            // 获取 WAV 数据(Blob)
            let wavBlob = recorder.getWAVBlob();
            var audio = document.createElement('audio');
            console.log(wavBlob);

            audio.src = URL.createObjectURL(wavBlob);



            audio.controls = true;
            container.appendChild(audio);


            const fileReader = new FileReader();
            fileReader.onload = (e) => {
                this.mp3Base64 = e.target.result;
                var size = wavBlob.size;
                console.log(size);
                axios({
                    // 请求方法
                    method: 'POST',
                    url: '/test3',
                    // url参数
                    params: {
                        myData: this.mp3Base64,
                        dataSize: size
                    }
                }).then(function (response) {
                    console.log(response.data);

                    let string = response.data;
                    var textArea = document.getElementById('result');
                    // 处理成功情况
                    textArea.innerHTML = string;
                });

            };

            fileReader.readAsDataURL(wavBlob);

            tip.innerText="点击按钮开始录音";;
            start.innerHTML="开始";
            clearTimeout(timer);
        }
        flag = !flag;
    });





</script>








<!--</script>-->

<!--<script>-->

<!--    var container = document.querySelector('#audio-container');-->

<!--    var recorder = new Recorder({-->
<!--        sampleRate: 44100, //采样频率，默认为44100Hz(标准MP3采样率)-->
<!--        bitRate: 128, //比特率，默认为128kbps(标准MP3质量)-->
<!--        success: function(){ //成功回调函数-->
<!--            // start.disabled = false;-->
<!--        },-->
<!--        error: function(msg){ //失败回调函数-->
<!--            alert(msg);-->
<!--        },-->
<!--        fix: function(msg){ //不支持H5录音回调函数-->
<!--            alert(msg);-->
<!--        }-->
<!--    });-->

<!--    var mask = document.getElementById('mask');-->
<!--    var start = document.querySelector('#start');-->
<!--    var tip = document.getElementById('tip');-->
<!--    var flag = true;-->


<!--    start.addEventListener('click',function(){-->
<!--        console.log(flag);-->
<!--        if(flag){-->
<!--            tip.innerText="正在录音";-->
<!--            timer = setTimeout(function(){-->
<!--                var audio = document.querySelectorAll('audio');-->
<!--                for(var i = 0; i < audio.length; i++){-->
<!--                    if(!audio[i].paused){-->
<!--                        audio[i].pause();-->
<!--                    }-->
<!--                }-->
<!--                start.innerHTML="再次点击结束";-->
<!--                recorder.start();-->

<!--            },500);-->
<!--        }else{-->
<!--            recorder.stop();-->
<!--            recorder.getBlob(function(blob){-->
<!--                var audio = document.createElement('audio');-->

<!--                console.log(blob);-->

<!--                audio.src = URL.createObjectURL(blob);-->

<!--                audio.controls = true;-->
<!--                container.appendChild(audio);-->



<!--                const fileReader = new FileReader();-->
<!--                fileReader.onload = (e) => {-->
<!--                    this.mp3Base64 = e.target.result;-->
<!--                    var size = blob.size;-->
<!--                    console.log(size);-->
<!--                    axios({-->
<!--                        // 请求方法-->
<!--                        method: 'POST',-->
<!--                        url: '/test3',-->
<!--                        // url参数-->
<!--                        params: {-->
<!--                            myData: this.mp3Base64,-->
<!--                            dataSize: size-->
<!--                        }-->
<!--                    }).then(function (response) {-->
<!--                        console.log(response.data);-->

<!--                        let string = response.data;-->
<!--                        var textArea = document.getElementById('result');-->
<!--                        // 处理成功情况-->
<!--                        textArea.innerHTML = string;-->
<!--                    });-->

<!--                };-->

<!--                fileReader.readAsDataURL(blob);-->

<!--            });-->
<!--            tip.innerText="点击按钮开始录音";;-->
<!--            start.innerHTML="开始";-->
<!--            clearTimeout(timer);-->
<!--        }-->
<!--        flag = !flag;-->
<!--    });-->

<!--    // start.addEventListener('touchmove',function(){-->
<!--    //     timeOutEvent = setTimeout(function(){-->
<!--    //         clearTimeout(timer);-->
<!--    //         timer = 0;-->
<!--    //     });-->
<!--    // })-->

<!--</script>-->
</body>
</html>